# onclick Event

Event Object

## Example

Execute a JavaScript when a button is clicked:

<button onclick="myFunction()">Click me</button>
Try it yourself »

More "Try it Yourself" examples below.

## Definition and Usage

The onclick event occurs when the user clicks on an element.

## Browser Support

Event |  |  |  |  |
--- | --- | --- | --- | --- | ---
onclick | Yes | Yes | Yes | Yes | Yes

## Syntax

In HTML:

<element onclick="myScript">Try it

In JavaScript:

object.onclick=function(){myScript};Try it

In JavaScript, using the addEventListener() method:

object.addEventListener("click", myScript);Try it

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

## Technical Details

Bubbles: | Yes
Cancelable: | Yes
Event type: | MouseEvent
Supported HTML tags: | All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
DOM Version: | Level 2 Events

## More Examples

## Example

Click on a <button> element to display the current day, date and time:

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
Try it yourself »

## Example

Click on a <p> element to change its text color to red:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Try it yourself »

## Example

Another example on how to change the color of a <p> element by clicking on it:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
Try it yourself »

## Example

Click on a button to copy some text from an input field to another input field:

<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Try it yourself »

## Example

Assign the "onclick" event to the window object:

window.onclick = myFunction;
// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Try it yourself »

## Related Pages

HTML DOM reference: ondblclick event

HTML DOM reference: onmousedown event

HTML DOM reference: onmouseup event

Event Object

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples